import React from 'react'
import {
  StyleSheet,
  View,
  Text,
  Image,
  TextInput,
  ScrollView,
  ListView,
  TouchableOpacity,
} from 'react-native'
import {
  Actions
} from 'react-native-router-flux'
import Menu, {
  MenuContext,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-menu'
import Icon from 'react-native-vector-icons/FontAwesome'
import navTab from '../../../util/navTab'
import {
  windowWidth,
} from '../../../util/dimension'
import theme from '../../theme'
import Toast from 'react-native-root-toast'

const {
  FIRST_FONT,
  SECOND_FONT,
  THIRD_FONT,
  GRAY_LINE,
} = theme
const { StatusBarHeight } = navTab


const styles = StyleSheet.create({
  navi:{
    flexDirection:'row',
    justifyContent:'space-between',
    paddingHorizontal:20,
    paddingTop:10 + StatusBarHeight,
    paddingBottom: 10,
    borderBottomWidth:1,
    borderColor:GRAY_LINE,
  },
  container:{
    paddingHorizontal:10,
  },
  title:{
    marginTop:10,
    fontSize:24,
    color:FIRST_FONT,
    lineHeight:30,
    fontWeight:'800',
  },
  desc:{
    color:SECOND_FONT,
    fontSize:20,
    lineHeight:22,
    marginTop:18,
    marginHorizontal:8,
  },
  content:{
    marginTop:22,
  },
})
function _renderNav(){
  return (
    <View
      style={styles.navi}
    >
      <TouchableOpacity
        onPress={Actions.pop}
        >
        <Icon
          name='chevron-left'
          size={24}
          color={FIRST_FONT}
          />
      </TouchableOpacity>
      <Menu onSelect={(data)=>Toast.show('====>'+data)}>
        <MenuTrigger>
          <Icon
            name='list-ul'
            size={24}
            color={FIRST_FONT}
            />
        </MenuTrigger>
        <MenuOptions>
          <MenuOption value={1}>
            <Text>One</Text>
          </MenuOption>
          <MenuOption value={2}>
            <Text>Two</Text>
          </MenuOption>
        </MenuOptions>
      </Menu>
    </View>
  )
}


const sponsorStyles = StyleSheet.create({
  container:{
    marginTop:20,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
  },
  info:{
    flexDirection:'row',
    alignItems:'center',
  },
  headerImg:{
    width:30,
    height:30,
    borderRadius:15,
  },
  name:{
    marginLeft:10,
    fontSize:20,
    color:FIRST_FONT,
  },
  time:{
    fontSize:16,
    alignSelf:'flex-end',
    marginRight:14,
    color:THIRD_FONT,
    marginTop:20,
  },
})
function _renderSponsor(){
  return (
  <View
    style={sponsorStyles.container}
    >
    <View
      style={sponsorStyles.info}>
      <Image
        style={sponsorStyles.headerImg}
        source={{uri:"http://tva2.sinaimg.cn/crop.3.0.634.634.1024/cd516b22jw8fa4mlfynwzj20hs0hm0tr.jpg"}}
        />
      <Text
        style={sponsorStyles.name}
        >姓名多少个字呢</Text>
    </View>
    <Text
      style={sponsorStyles.time}
      >时间呢</Text>
  </View>
  )
}

function _renderHeader(){
  return (
    <View>
    {_renderNav()}
    <View
      style={styles.container}
      >
      <View>
        <Text
          style={styles.title}
          >凤无法快速的氛围快递费带看文件而服务可减肥水电费降温快放假</Text>
      </View>
      {_renderSponsor()}
      <View>
        <Text
          style={styles.desc}
          numberOfLines={2}
          ellipsizeMode='tail'
          >{'\t'}描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</Text>
      </View>
      <View style={styles.content}>
        <Text></Text>
      </View>

    </View>
    </View>
  )
}
const rowStyles = StyleSheet.create({
  container:{
    paddingHorizontal:20,
    paddingTop:20,
    paddingBottom:5,
    borderBottomWidth:1,
    borderColor:GRAY_LINE,
  },
  header:{
    flexDirection:'row',
    justifyContent:'space-between',
  },
  comment:{
    //borderStyle enum('solid', 'dotted', 'dashed')    
    borderStyle:'dotted',
    borderColor:'black',
    marginBottom:10,
  }

})
function _renderRow(data){
  return (
    <View
      style={rowStyles.container}
      >
      <View style={rowStyles.header}>
        <View
          style={sponsorStyles.info}>
          <Image
            style={sponsorStyles.headerImg}
            source={{uri:"http://tva2.sinaimg.cn/crop.3.0.634.634.1024/cd516b22jw8fa4mlfynwzj20hs0hm0tr.jpg"}}
            />
          <Text
            style={sponsorStyles.name}
            >姓名多少个字呢</Text>
        </View>
        <View>
          <Icon
            name="comment-o"
            size={20}
            color={FIRST_FONT}
            />
        </View>
      </View>
      <View style={rowStyles.comment}>
        <Text>你好，Info 呢hello 擦</Text>

      </View>
    </View>
  )
}
const ShowStory = React.createClass({
  getInitialState(){
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged:(r1,r2) => r1!==r2
      }).cloneWithRows([1]),
    }
  },
  componentDidMount(){
  },
  render(){
    const {
      dataSource,
    } = this.state
    return(
      <MenuContext style={{flex:1}}>
        <ListView
          renderHeader={_renderHeader}
          dataSource={dataSource}
          renderRow={_renderRow}
          />
      </MenuContext>
    )
  },
})

export default ShowStory
